<template>
  <div style="margin: 10px; background-color: #f0f8ff">
    <div>
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/report.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>本月告警</div>
                <div style="font-size: 18px; font-weight: bold">60</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/shebeizongshu.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>设备总数</div>
                <div style="font-size: 18px; font-weight: bold">800</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/personnel.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>人员总数</div>
                <div style="font-size: 18px; font-weight: bold">1000</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/vehicle.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>车位总数</div>
                <div style="font-size: 18px; font-weight: bold">200</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/conference.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>会议室总数</div>
                <div style="font-size: 18px; font-weight: bold">25</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="topImg">
            <el-row>
              <el-col :span="12">
                <div style="float: right; padding: 15px">
                  <el-image
                    style="width: 50px; height: 50px"
                    :src="require('@/assets/img/asset.png')"
                  ></el-image>
                </div>
              </el-col>
              <el-col :span="12" style="padding: 15px">
                <div>资产总数</div>
                <div style="font-size: 18px; font-weight: bold">5232</div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="margintop">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <div class="title">设备统计</div>
          </el-card>
          <el-card class="margintop cardbox">
            <el-row>
              <el-col :span="12">
                <div class="title">物联网设备统计</div>
                <div class="headline">物联网设备总数:{{ shebeiSum }}个</div>
                <div class="echartsbox" ref="echarts">
                  <div style="text-align: center">
                    <el-empty description="暂无相关数据" :image-size="80"></el-empty>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="title">大类设备统计</div>
                <div class="echartsbox" ref="echarts2">
                  <div style="text-align: center">
                    <el-empty description="暂无相关数据" :image-size="80"></el-empty>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div class="title">便捷通行</div>
          </el-card>
          <el-card class="margintop cardbox">
            <el-row>
              <el-col :span="12">
                <div class="title">人员统计</div>
                <div style="width: 100%; height: 200px" ref="echarts3">
                  <div style="text-align: center">
                    <el-empty description="暂无相关数据" :image-size="80"></el-empty>
                  </div>
                </div>
                <div class="headline">通行人员总数：{{ renyuanSum }}</div>
              </el-col>
              <el-col :span="12">
                <div class="title">车位统计</div>
                <div class="headline">车位总数：{{ cheweiSum }}</div>
                <el-row :gutter="10">
                  <el-col :span="12" style="text-align: center">
                    <div class="shebeiTop">
                      <el-image
                        style="
                          width: 60px;
                          height: 60px;
                          background-color: aquamarine;
                          border-radius: 50%;
                        "
                        :src="require('@/assets/img/car.png')"
                      >
                      </el-image>
                    </div>
                    <div class="shebeiTop">有车</div>
                    <div class="shebeiTop" style="font-size: 18px; font-weight: bold">
                      150
                    </div>
                  </el-col>
                  <el-col :span="12" style="text-align: center">
                    <div class="shebeiTop">
                      <el-image
                        style="
                          width: 60px;
                          height: 60px;
                          background-color: aquamarine;
                          border-radius: 50%;
                        "
                        :src="require('@/assets/img/empty.png')"
                      >
                      </el-image>
                    </div>
                    <div class="shebeiTop">空闲</div>
                    <div class="shebeiTop" style="font-size: 18px; font-weight: bold">
                      50
                    </div>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="margintop">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card>
            <div class="title">能耗统计</div>
          </el-card>
          <el-card class="margintop cardbox">
            <div class="title">能耗时间段分析</div>
            <div class="echartsbox" ref="echarts4">
              <div style="text-align: center">
                <el-empty description="暂无相关数据" :image-size="80"></el-empty>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="title">环境监测</div>
          </el-card>
          <el-card class="margintop cardbox">
            <div class="title">近30天环境告警类型统计</div>
            <div class="echartsbox" ref="echarts5">
              <div style="text-align: center">
                <el-empty description="暂无相关数据" :image-size="80"></el-empty>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="title">告警统计</div>
          </el-card>
          <el-card class="margintop cardbox">
            <el-row>
              <el-col :span="12">
                <div class="title">近30天告警等级</div>
                <div class="echartsbox" ref="echarts7">
                  <div style="text-align: center">
                    <el-empty description="暂无相关数据" :image-size="80"></el-empty>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="title">告警工单处理率</div>
                <div class="echartsbox" ref="echarts6">
                  <div style="text-align: center">
                    <el-empty description="暂无相关数据" :image-size="80"></el-empty>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      shebeiSum: "800",
      shebeizongshu: [
        { name: "在线总数", value: "450" },
        { name: "离线总数", value: "250" },
        { name: "告警总数", value: "100" },
      ],
      renyuanSum: "151",
      cheweiSum: "200",
      chulilvNums: "80%",
      huanjingtongjiData: [
        { name: "高温告警", value: "22" },
        { name: "低温告警", value: "12" },
        { name: "干燥告警", value: "32" },
        { name: "潮湿告警", value: "25" },
        { name: "PM2.5超标", value: "34" },
        { name: "二氧化碳超标", value: "36" },
      ],
      huanjingchuliData: [
        { name: "已处理", value: "80" },
        { name: "未处理", value: "20" },
      ],
    };
  },
  created() {},
  mounted() {
    this.shebeizongshuEcharts();
    this.dalleishebeiEcharts();
    this.renyuantongji();
    this.nenghaoshijianEcharts();
    this.gaojingleixingtongjiEcharts();
    this.huanjingchuliEcharts();
    this.gaojingdnegjiEcharts();
  },
  methods: {
    //物联网设备总数Echarts
    shebeizongshuEcharts() {
      var dataValue = this.shebeizongshu;
      var echarts = this.$refs.echarts;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts);
      }

      var option;

      option = {
        title: {
          // text: 'Referer of a Website',
          // subtext: 'Fake Data',
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          formatter: function (data) {
            //显示提示框名字以及数量
            let tempArr = dataValue.filter((item) => item.name === data);
            return `${tempArr[0].name}    ${tempArr[0].value} `;
          },
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            center: ["45%", "60%"], //调整饼图的位置
            radius: "50%",
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: this.shebeizongshu,
          },
        ],
      };

      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //大类设备统计Echarts
    dalleishebeiEcharts() {
      var echarts2 = this.$refs.echarts2;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts2);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts2);
      }

      var option;

      option = {
        title: {
          // text: 'World Population'
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: [],
        },
        grid: {
          top: "1%",
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          scale: true,
          splitNumber: 1,
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: ["视频监控", "门禁设备", "空调设备", "消防设备", "环境监测", "其他设备"],
        },
        series: [
          {
            // name: '2011',
            name: "(单位:万)",
            type: "bar",
            barWidth: 15,
            data: [18203, 23489, 29034, 14970, 31744, 30230],
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 20, 20], //圆角[上左，上右，下右，下左]
                label: {
                  show: true, //开启数字显示
                  position: "right", //在上方显示数字
                  textStyle: {
                    //数值样式
                    color: "#474646", //字体颜色
                    fontSize: 10, //字体大小
                  },
                },
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: "#017CE4" },
                  { offset: 1, color: "#249EFD" },
                ]),
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //人员统计Echarts
    renyuantongji() {
      var echarts3 = this.$refs.echarts3;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts3);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts3);
      }

      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "bottom",
          data: [],
        },
        toolbox: {
          show: true,
          feature: {
            // mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            // saveAsImage: { show: true }
          },
        },
        series: [
          {
            // name: 'Nightingale Chart',
            type: "pie",
            radius: [20, 80],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 28, name: "入住人员" },
              { value: 26, name: "外包人员" },
              { value: 22, name: "访客" },
              { value: 18, name: "内部员工" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //能耗时间段分析Echarts
    nenghaoshijianEcharts() {
      var echarts4 = this.$refs.echarts4;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts4);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts4);
      }

      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [10, 52, 200, 334, 390, 330, 220],
          },
        ],
      };

      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //近30天环境告警类型统计Echarts
    gaojingleixingtongjiEcharts() {
      var dataValue = this.huanjingtongjiData;
      var echarts5 = this.$refs.echarts5;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts5);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts5);
      }

      var option;
      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical", //字体竖着排，干掉后横着排
          top: "5%", //调整到顶部的距离
          left: "5%",
          formatter: function (data) {
            //显示提示框名字以及数量
            let tempArr = dataValue.filter((item) => item.name === data);
            return `${tempArr[0].name}    ${tempArr[0].value} `;
          },
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            center: ["65%", "50%"], //调整饼图的位置
            radius: ["30%", "50%"],
            data: this.huanjingtongjiData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //环境告警处理率Echarts
    huanjingchuliEcharts() {
      var dataValue1 = this.huanjingchuliData;
      var echarts6 = this.$refs.echarts6;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts6);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts6);
      }
      var option;
      option = {
        title: {
          subtext: this.chulilvNums,
          subtextStyle: {
            color: "#999999",
            fontSize: "29",
          },
          textAlign: "center",
          left: "48%",
          top: "40%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical", //字体竖着排，干掉后横着排
          top: "1%", //调整到顶部的距离
          left: "5%",
          formatter: function (data) {
            //显示提示框名字以及数量
            let tempArr = dataValue1.filter((item) => item.name === data);
            return `${tempArr[0].name}    ${tempArr[0].value}% `;
          },
        },
        series: [
          {
            // name: 'Access From',
            type: "pie",
            center: ["50%", "50%"], //调整饼图的位置
            radius: ["30%", "50%"],
            data: this.huanjingchuliData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    //近30天告警等级Echarts
    gaojingdnegjiEcharts() {
      var echarts7 = this.$refs.echarts7;
      let myChart = this.$echarts.getInstanceByDom(this.$refs.echarts7);
      if (myChart == null) {
        myChart = this.$echarts.init(echarts7);
      }

      var option;

      option = {
        title: {
          // text: 'Multiple Radar'
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          left: "center",
          data: [],
        },
        grid: {
          left: "10%",
          right: "4%",
          bottom: "3%",
          top: "20",
          containLabel: true,
        },
        radar: [
          {
            indicator: [
              { text: "紧急", max: 100 },
              { text: "重要", max: 100 },
              { text: "重要", max: 100 },
            ],
            center: ["55%", "50%"],
            radius: 80,
          },
        ],
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            areaStyle: {},
            data: [
              {
                value: [60, 73, 85, 40],
                name: "告警等级",
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
      //自适应屏幕大小
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.topImg {
  background-color: white;
  height: 80px;
  border-radius: 8px;
}
.echartsbox {
  height: 260px;
  width: 100%;
}
.shebeiTop {
  margin-top: 20px;
}
.headline {
  text-align: center;
}
.title {
  padding: 10px;
  font-weight: bold;
}
.cardbox {
  height: 300px;
}
.margintop {
  margin-top: 10px;
}
</style>
